<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>键盘事件</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- 1.vue中常用的按键别名
        回车   enter
        删除   delete
        退出   esc
        空格   space
        换行   tab(特殊，配合keydown)
        上     up
        下     down
        左     left
        右     right 
    
        2.vue未指定别名的按键可以使用按键的原始key值去绑定，可以输出e.key去获取,但类似CapsLock要转换成caps-lock去写

        3.比较特殊的tab键不适合用keyup方法，而是keydown因为它会切换走焦点

        4.系统修饰键 ctrl  alt  shift  meta
           (1）配合keyup使用；按下修饰键的同时再按下其他键，随后释放其他键才能触发
           (2)配合keydown使用则可以正常触发事件
        
        5.也可以使用keyCode去指定具体的按键，但是不推荐,这种方式可能废弃

        6.Vue.config.keCodes 自定义键名=键码  可以定制按键别名
    
    -->



        <!-- 可以使用修饰符直接判断按下的是哪个按钮 -->

        <!-- 注意：如果 只想按下ctrl加上y时才能触发 此时也可以连写@keyup.ctrl.y -->
        <input type="text" placeholder="按下键盘时提示信息" @keyup.huiche="show">
    </div>
    <script>

        //程序基本功能，在文本框输入按下对应键在控制台输出内容
        Vue.config.productionTip = false;
        Vue.config.keyCodes.huiche = 13;//相当于定义了一个别名按键

        var vm = new Vue({
            el: '#root',
            data: {},
            methods: {
                show(e) {
                    // if (e.keyCode !== 13) return
                    console.log(e.target.value);
                }
            }
        });
    </script>
</body>

</html>